// 导入Lucide React图标库中的图标组件
import { ChevronLeft, ChevronRight, Camera } from 'lucide-react';
// 导入React Router的useNavigate钩子，用于页面导航
import { useNavigate } from 'react-router-dom';
// 导入React的useState和useRef钩子
import { useState, useRef } from 'react';
// 导入Redux store的自定义hooks
import { useAppDispatch, useAppSelector } from '../store/hooks';
// 导入Redux userSlice中的logout和updateUserInfo actions
import { logout, updateUserInfo } from '../store/userSlice';

/**
 * 设置页面组件 - 应用设置和用户信息管理
 * 
 * 功能特性：
 * - 用户头像上传和更新
 * - 用户基本信息展示
 * - 应用设置选项
 * - 退出登录功能
 * - Redux状态管理集成
 * 
 * 主要状态：
 * - isLogoutModalOpen: 退出登录弹窗显示状态
 * - userInfo: 用户信息（从Redux获取）
 * 
 * 文件上传功能：
 * - 支持图片文件选择
 * - 文件类型验证（仅图片）
 * - 文件大小限制（5MB）
 * - 自动转换为Data URL格式
 * - 实时头像预览
 * 
 * 用户信息管理：
 * - 头像上传和更新
 * - 用户信息展示
 * - 信息修改功能
 * 
 * 退出登录流程：
 * - 退出确认弹窗
 * - Redux状态清理
 * - 页面跳转处理
 * 
 * 安全特性：
 * - 文件类型验证
 * - 文件大小限制
 * - 用户操作确认
 * 
 * 页面布局：
 * - 顶部导航栏
 * - 用户信息区域
 * - 设置选项列表
 * - 退出登录按钮
 * 
 * @returns {JSX.Element} 设置页面组件
 */
export default function SettingsPage() {
  // 获取导航函数，用于页面跳转
  const navigate = useNavigate();
  // 获取Redux dispatch函数，用于发送action
  const dispatch = useAppDispatch();
  // 从Redux store获取用户信息
  const { userInfo } = useAppSelector(state => state.user);
  
  // 定义退出登录弹窗的显示状态
  const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
  // 定义文件输入框的引用
  const fileInputRef = useRef<HTMLInputElement>(null);

  // 处理返回按钮点击事件
  const handleBackClick = () => {
    // 返回上一页
    navigate(-1);
  };

  // 处理退出登录按钮点击事件
  const handleLogoutClick = () => {
    // 显示退出登录确认弹窗
    setIsLogoutModalOpen(true);
  };

  // 处理退出登录确认事件
  const handleLogoutConfirm = () => {
    // 确认退出登录，清除用户信息
    dispatch(logout());
    // 关闭退出登录弹窗
    setIsLogoutModalOpen(false);
    // 跳转到首页
    navigate('/');
  };

  // 处理退出登录取消事件
  const handleLogoutCancel = () => {
    // 取消退出登录，关闭弹窗
    setIsLogoutModalOpen(false);
  };

  // 处理头像点击事件
  const handleAvatarClick = () => {
    // 点击头像时触发文件选择
    fileInputRef.current?.click();
  };

  // 处理文件选择变化事件
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    // 获取选择的文件
    const file = event.target.files?.[0];
    if (file && userInfo) {
      // 检查文件类型是否为图片
      if (!file.type.startsWith('image/')) {
        alert('请选择图片文件');
        return;
      }

      // 检查文件大小（限制为5MB）
      if (file.size > 5 * 1024 * 1024) {
        alert('图片大小不能超过5MB');
        return;
      }

      // 创建文件读取器
      const reader = new FileReader();
      // 文件读取完成后的回调函数
      reader.onload = (e) => {
        const result = e.target?.result as string;
        if (result) {
          // 更新用户信息中的头像
          const updatedUserInfo = {
            ...userInfo,
            avatar: result
          };
          
          // 使用Redux action更新用户信息
          dispatch(updateUserInfo({ avatar: result }));
          
          // 显示成功提示
          alert('头像更新成功！');
        }
      };
      
      // 开始读取文件为Data URL格式
      reader.readAsDataURL(file);
    }
  };

  // 如果用户未登录，显示登录提示
  if (!userInfo || !userInfo.isLoggedIn) {
    return (
      // 未登录状态的主容器
      <div className="min-h-full bg-white">
        {/* 顶部导航栏 */}
        <div className="px-4 py-6 flex items-center border-b border-gray-100">
          {/* 返回按钮 */}
          <button onClick={handleBackClick} className="w-8 h-8 flex items-center justify-center mr-4">
            <ChevronLeft className="w-6 h-6 text-gray-900" />
          </button>
          {/* 页面标题 */}
          <h1 className="text-xl font-bold text-gray-900">设置</h1>
        </div>
        {/* 登录提示区域 */}
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="text-center">
            {/* 提示文本 */}
            <p className="text-gray-500 mb-4">请先登录</p>
            {/* 去登录按钮 */}
            <button
              onClick={() => navigate('/login')}
              className="px-6 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600"
            >
              去登录
            </button>
          </div>
        </div>
      </div>
    );
  }

  // 返回已登录状态的JSX结构
  return (
    // 主容器，设置最小高度和背景色
    <div className="min-h-full bg-white">
      {/* 顶部导航栏 */}
      <div className="px-4 py-6 flex items-center justify-between border-b border-gray-100">
        {/* 左侧返回按钮 */}
        <button 
          onClick={handleBackClick}
          className="w-8 h-8 flex items-center justify-center mr-4"
        >
          <ChevronLeft className="w-6 h-6 text-gray-900" />
        </button>
        {/* 页面标题 */}
        <h1 className="text-xl font-bold text-gray-900">设置</h1>
        {/* 占位元素，保持标题居中 */}
        <div className="w-8"></div>
      </div>

      {/* 用户信息区域 */}
      <div className="px-4 py-6">
        <div className="flex items-center space-x-4 mb-6">
          {/* 头像区域 */}
          <div className="relative">
            {/* 用户头像图片 */}
            <img
              src={userInfo.avatar || 'https://api.dicebear.com/7.x/avataaars/svg?seed=default'}
              alt="用户头像"
              className="w-16 h-16 rounded-full object-cover cursor-pointer"
              onClick={handleAvatarClick}
            />
            {/* 相机图标，点击可更换头像 */}
            <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center cursor-pointer" onClick={handleAvatarClick}>
              <Camera className="w-3 h-3 text-white" />
            </div>
          </div>
          
          {/* 用户信息文本区域 */}
          <div className="flex-1">
            {/* 用户名 */}
            <h2 className="text-lg font-semibold text-gray-900">
              {userInfo.name || `用户${userInfo.phone?.slice(-4) || ''}`}
            </h2>
            {/* 手机号 */}
            <p className="text-sm text-gray-500">
              {userInfo.phone || '未绑定手机号'}
            </p>
          </div>
        </div>

        {/* 隐藏的文件输入框 */}
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          onChange={handleFileChange}
          className="hidden"
        />
      </div>

      {/* 设置选项区域 */}
      <div className="px-4">
        {/* 账户设置分组 */}
        <div className="mb-6">
          {/* 分组标题 */}
          <h3 className="text-sm font-medium text-gray-700 mb-3">账户设置</h3>
          {/* 设置项容器 */}
          <div className="bg-white rounded-lg border border-gray-200">
            {/* 个人资料设置项 */}
            <button className="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-50 transition-colors">
              <span className="text-gray-900">个人资料</span>
              <ChevronRight className="w-5 h-5 text-gray-400" />
            </button>
            {/* 分隔线 */}
            <div className="border-t border-gray-200"></div>
            {/* 手机号设置项 */}
            <button className="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-50 transition-colors">
              <span className="text-gray-900">手机号</span>
              <div className="flex items-center space-x-2">
                <span className="text-sm text-gray-500">{userInfo.phone || '未绑定'}</span>
                <ChevronRight className="w-5 h-5 text-gray-400" />
              </div>
            </button>
            {/* 分隔线 */}
            <div className="border-t border-gray-200"></div>
            {/* 邮箱设置项 */}
            <button className="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-50 transition-colors">
              <span className="text-gray-900">邮箱</span>
              <div className="flex items-center space-x-2">
                <span className="text-sm text-gray-500">{userInfo.email || '未绑定'}</span>
                <ChevronRight className="w-5 h-5 text-gray-400" />
              </div>
            </button>
          </div>
        </div>

        {/* 应用设置分组 */}
        <div className="mb-6">
          {/* 分组标题 */}
          <h3 className="text-sm font-medium text-gray-700 mb-3">应用设置</h3>
          {/* 设置项容器 */}
          <div className="bg-white rounded-lg border border-gray-200">
            {/* 通知设置项 */}
            <button className="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-50 transition-colors">
              <span className="text-gray-900">通知设置</span>
              <ChevronRight className="w-5 h-5 text-gray-400" />
            </button>
            {/* 分隔线 */}
            <div className="border-t border-gray-200"></div>
            {/* 隐私设置项 */}
            <button className="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-50 transition-colors">
              <span className="text-gray-900">隐私设置</span>
              <ChevronRight className="w-5 h-5 text-gray-400" />
            </button>
            {/* 分隔线 */}
            <div className="border-t border-gray-200"></div>
            {/* 关于我们设置项 */}
            <button className="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-50 transition-colors">
              <span className="text-gray-900">关于我们</span>
              <ChevronRight className="w-5 h-5 text-gray-400" />
            </button>
          </div>
        </div>

        {/* 退出登录区域 */}
        <div className="mb-6">
          {/* 退出登录按钮 */}
          <button
            onClick={handleLogoutClick}
            className="w-full px-4 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
          >
            退出登录
          </button>
        </div>
      </div>

      {/* 退出登录确认弹窗 */}
      {isLogoutModalOpen && (
        // 弹窗遮罩层
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          {/* 弹窗内容 */}
          <div className="bg-white rounded-lg p-6 w-11/12 max-w-sm">
            {/* 弹窗标题 */}
            <h3 className="text-lg font-semibold text-gray-900 mb-4">确认退出登录</h3>
            {/* 弹窗提示文本 */}
            <p className="text-gray-600 mb-6">退出登录后，您需要重新登录才能使用相关功能。</p>
            {/* 弹窗按钮区域 */}
            <div className="flex space-x-3">
              {/* 取消按钮 */}
              <button
                onClick={handleLogoutCancel}
                className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
              >
                取消
              </button>
              {/* 确认退出按钮 */}
              <button
                onClick={handleLogoutConfirm}
                className="flex-1 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
              >
                确认退出
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
} 